import React, { useState, useEffect } from "react";
import { InputNumber, Button, message } from "antd";
import Admin from "@/models/admin";
import showToast from "@/utils/message";
import "../index.css";
const App = ({ handleCancel }) => {
  const [text_splitter_chunk_size, setText_splitter_chunk_size] = useState(1000);
  const [text_splitter_chunk_overlap, setText_splitter_chunk_overlap] = useState(20);
  useEffect(() => {
    if (text_splitter_chunk_size < text_splitter_chunk_overlap) {
      message.warning("文本块重叠字符数不得大于文本块大小最大长度");
      return;
    }
  }, [text_splitter_chunk_size, text_splitter_chunk_overlap]);

  const changeTextSize = (value) => {
    setText_splitter_chunk_size(value);
  };

  const changeBlockOverlap = (value) => {
    setText_splitter_chunk_overlap(value);
  };

  // 重置按钮的处理函数
  const handleReset = async () => {
    setText_splitter_chunk_size(1000);
    setText_splitter_chunk_overlap(20);
  };

  const handleSave = async () => {
    const { success, error } = await Admin.updateSystemPreferences({
      text_splitter_chunk_size,
      text_splitter_chunk_overlap,
    });
    if (success) {
      showToast("success", "保存成功");
    } else {
      showToast("error", error || "保存失败");
    }
    handleCancel();
  };
  return (
    <>
      <div className="content-top h-[420px]">
        <div className="flex flex-col text-[14px] text-theme-text-default  mb-[24px]">
          <p className="font-semibold">
            这是单个向量中可以存在的字符的最大长度
          </p>
          <span className="mb-[12px] text-[13px] text-theme-modal-tips">
            文本块大小（最大1000）
          </span>
          <InputNumber
            className="w-full ant-input-number"
            controls={true}
            min={1}
            max={1000}
            value={text_splitter_chunk_size}
            onChange={changeTextSize}
          />
        </div>

        <div className="flex flex-col text-[14px]">
          <p className="font-semibold">文本块重叠</p>
          <span className="mb-[12px] text-[13px] text-theme-modal-tips">
            这是在两个相邻文本块之间分块期间发生的最大字符重叠
          </span>
          {/* <Input placeholder="在此输入" suffix="重置" /> */}
          <InputNumber
            className="w-full ant-input-number"
            controls={true}
            min={1}
            max={1000}
            value={text_splitter_chunk_overlap}
            onChange={changeBlockOverlap}
          />
        </div>
      </div>
      <div className="content-bottom flex items-center justify-end">
        <Button color="default" variant="link" onClick={handleCancel}>
          取消
        </Button>
        <Button type="link" onClick={handleReset}>
          重置
        </Button>
        <Button color="primary" variant="link" onClick={handleSave}>
          保存
        </Button>
      </div>
    </>
  );
};
export default App;
